<script>
import { getStringColor } from '../../utils/color'

export default {
  name: 'BiAvatar',
  functional: true,
  props: {
    src: {
      type: String
    },
    name: {
      type: String
    },
    round: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'small',
      validator (value) {
        return ['large', 'medium', 'small', 'mini', 'micro'].includes(value)
      }
    }
  },
  render (h, c) {
    const { props } = c
    const lastText = props.name ? props.name.substr(props.name.length - 1).toLocaleUpperCase() : ''
    let style = {}
    if (props.src) {
      style = {
        'background-image': `url(${props.src})`,
        'line-height': '999px'
      }
    } else {
      style = {
        'background-color': getStringColor(props.name)
      }
    }
    return h('div', {
      class: ['bi-avatar', c.data.class, c.data.staticClass, 'bi-avatar--' + props.size, { 'is-round': props.round }],
      style
    }, [lastText])
  }
}
</script>
<style lang="less">
.bi-avatar {
  display: inline-block;
  background-color: #eee;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  text-align: center;
  overflow: hidden;
  color: #fff;
  &.is-round {
    border-radius: 50%;
  }
}
.bi-avatar--micro {
  min-width: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
}
.bi-avatar--mini {
  min-width: 24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 13px;
  &:not(.is-round) {
    border-radius: 3px;
  }
}
.bi-avatar--small {
  min-width: 32px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 15px;
  &:not(.is-round) {
    border-radius: 3px;
  }
}
.bi-avatar--medium {
  min-width: 48px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  &:not(.is-round) {
    border-radius: 6px;
  }
}
.bi-avatar--large {
  min-width: 72px;
  width: 72px;
  height: 72px;
  line-height: 72px;
  font-size: 32px;
  &:not(.is-round) {
    border-radius: 8px;
  }
}
</style>
